<!--
 * @Author: “1077321622@qq.com” lzr448470520
 * @Date: 2023-11-23 13:48:51
 * @LastEditors: “1077321622@qq.com” lzr448470520
 * @LastEditTime: 2023-11-24 09:25:17
 * @FilePath: \Vue3开发常用插件集合\插件\src\views\imgcropper.vue
 * @Description: 图片上传裁剪
-->

<template>
    <div class='content'>
          <el-button type="danger" @click="addimg">上传图片 </el-button>
          <img v-if="imgurl" :src="imgurl" alt="" width='200' height="100">
          <comCutimgcropper   ref="imgref"    @uploadImgSuccess="uploadImgSuccess"  ></comCutimgcropper>
    </div>
</template>
  
<script setup>
import comCutimgcropper from '../components/imgcropper.vue'
import { ref ,watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
const router = useRouter();
const imgref = ref(null);
const imgurl = ref("");

const addimg = () => {
  imgref.value.open();
}

const uploadImgSuccess = data => {
  //调用接口
  // uploadImage(data)
  
  //这里为了展示 直接 写死一张图片 关闭弹框
  imgurl.value = "https://img2.baidu.com/it/u=3354585195,1512541150&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1700845200&t=636a3f6d0f2d46b6753a203f48801a98"
  imgref.value.close()

}
const uploadImage = async data => {
  console.log(data)
  //这里就是跟后台约定好需要传递什么参数
  const params = {
    file: data,
    fileName: data.fileName, 
  }
  //上传接口
  const res = await uploads(params);
  if (res && res.code === 200) {
    //页面上显示图片 后端返回的图片地址
    imgurl.value = res.data.url;
    //关闭弹窗
    imgref.value.close()
  }
}


/**
 * axiso 封装一般这么写 都是采用 FormData的形式  注意请求头 headers    'Content-Type': 'multipart/form-data'
 * 
 * export const uploads = params => {
  const data = new FormData()
  data.append('file', params.file, params.fileName)
  return request({
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    url: "你的地址",
    method: 'post',
    data,
  })
}
 */

</script>

